<template>
  <div>
    <div ref="visitChart" v-height="320"></div>
  </div>
</template>

<script>
import * as echarts from "echarts";
export default {
  name: "经营信息跟踪",
  data() {
    return {};
  },

  methods: {
    handleSetVisitChart() {
      this.visitChart = echarts.init(this.$refs.visitChart);
      this.visitChart.setOption({
        tooltip: {
          trigger: "item",
        },
        legend: {
          bottom: 20,
          left: "center",
        },
        series: [
          {
            name: "Access From",
            type: "pie",
            center: ["50%", "40%"],
            radius: ["40%", "70%"],
            avoidLabelOverlap: false,
            label: {
              show: false,
              position: "center",
            },
            emphasis: {
              label: {
                show: true,
                fontSize: 26,
                fontWeight: "bold",
              },
            },

            labelLine: {
              show: false,
            },
            data: [
              { value: 1048, name: "Search Engine" },
              { value: 735, name: "Direct" },
              { value: 580, name: "Email" },
              { value: 484, name: "Union Ads" },
              { value: 300, name: "Video Ads" },
            ],
          },
        ],
        color: ["#9860DF", "#1495EB", "#00CC66", "#F9D249", "#ff9900"],
        graphic: {
          type: "text",
          left: "center",
          // top: "center",
          top: 120,
          style: {
            text: "中心内容",
            textAlign: "center",
            fill: "#000",
            fontSize: 20,
          },
        },
      });
    },
    handleResize() {
      this.visitChart.resize();
    },
  },
  mounted() {
    this.handleSetVisitChart();
  },
  beforeDestroy() {
    if (this.visitChart) {
      this.visitChart.dispose();
      this.visitChart = null;
    }
  },
};
</script>
